<page-header [title]="'添加'" >
    <!--<ng-template #breadcrumb>-->
        <!--<nz-breadcrumb>-->
            <!--<nz-breadcrumb-item>基本信息</nz-breadcrumb-item>-->
            <!--&lt;!&ndash;<nz-breadcrumb-item><a [routerLink]="['/prod/product']">基本资料</a></nz-breadcrumb-item>&ndash;&gt;-->
        <!--</nz-breadcrumb>-->
    <!--</ng-template>-->
  <ng-template #action><button nz-button (click)="back()"style="float: right"><i class="anticon anticon-rollback" style="font-size: 14px"></i>返回</button></ng-template>

  <!--<ng-template #action><button nz-button (click)="back()"style="float: right"><i class="anticon anticon-rollback" style="font-size: 14px"></i>返回订单列表</button></ng-template>-->
</page-header>
<!--<nz-spin [nzSpinning]="loading">-->
<nz-spin [nzSpinning]="loading">

  <nz-card nzTitle="证件识别">

    <form nz-form >
      <nz-row [nzGutter]="32">
        <nz-col [nzSpan]="8" style="width: auto">

        <nz-upload  class="avatar-uploader"
                   [nzAction]="uploadUrl"
                   [nzData]="avatarParam1"
                   nzName="file1"
                   [nzShowUploadList]="false"
                   [nzBeforeUpload]="beforeUpload"
                   (nzChange)="handleChange1($event)">
          <i *ngIf="!avatarUrl1" class="anticon anticon-plus avatar-uploader-trigger"></i>
          <img *ngIf="avatarUrl1" [src]="avatarUrl1" class="avatar">
        </nz-upload>
          <span style="margin-left: 30px">(身份证人像面)</span>

      </nz-col>
        <nz-col [nzSpan]="8" style="width: auto">

          <nz-upload class="avatar-uploader"
                     [nzAction]="uploadUrl"
                     [nzData]="avatarParam2"
                     nzName="file2"
                     [nzShowUploadList]="false"
                     [nzBeforeUpload]="beforeUpload"
                     (nzChange)="handleChange2($event)">
            <i *ngIf="!avatarUrl2" class="anticon anticon-plus avatar-uploader-trigger"></i>
            <img *ngIf="avatarUrl2" [src]="avatarUrl2" class="avatar">
          </nz-upload>
          <span style="margin-left: 30px">(身份证国徽面)</span>

        </nz-col>
        <nz-col [nzSpan]="8" style="width: auto">

          <nz-upload class="avatar-uploader"
                     [nzAction]="uploadUrl"
                     [nzData]="avatarParam3"
                     nzName="file3"
                     [nzShowUploadList]="false"
                     [nzBeforeUpload]="beforeUpload"
                     (nzChange)="handleChange3($event)">
            <i *ngIf="!avatarUrl3" class="anticon anticon-plus avatar-uploader-trigger"></i>
            <img *ngIf="avatarUrl3" [src]="avatarUrl3" class="avatar">
          </nz-upload>
          <span style="margin-left: 30px">(机动车行驶证)</span>

        </nz-col>
        <nz-col [nzSpan]="8" style="width: auto">
          <nz-upload class="avatar-uploader"
                     [nzAction]="uploadUrl"
                     [nzData]="avatarParam4"
                     nzName="file4"
                     [nzShowUploadList]="false"
                     [nzBeforeUpload]="beforeUpload"
                     (nzChange)="handleChange4($event)">

            <i *ngIf="!avatarUrl4" class="anticon anticon-plus avatar-uploader-trigger"> </i>
            <img *ngIf="avatarUrl4" [src]="avatarUrl4" class="avatar">
          </nz-upload>
          <span style="margin-left: 30px">(担保人身份证)</span>

        </nz-col>

      </nz-row>

    </form>
  </nz-card>


    <nz-card nzTitle="基本信息 "   >

      <form nz-form>

        <nz-form-item>
          <nz-form-label nzSpan="2" nzRequired>订单编号</nz-form-label>
          <nz-form-control nzSpan="4">
            <input nz-input required [(ngModel)]="orderNo" name="orderNo">

          </nz-form-control>
        </nz-form-item>
            <nz-form-item>
              <nz-form-label nzSpan="2" nzRequired>产品</nz-form-label>
              <nz-form-control nzSpan="4">
                <input nz-input required [(ngModel)]="product.proNo" name="proNo">


              </nz-form-control>
                <nz-form-label nzSpan="2" nzRequired>产品名称</nz-form-label>
                <nz-form-control nzSpan="4">
                  <input nz-input required [(ngModel)]="product.proName" name="proName">


                </nz-form-control>

                <nz-form-label nzSpan="2" nzRequired>客户姓名</nz-form-label>
                <nz-form-control nzSpan="4">
                  <input nz-input required [(ngModel)]="product.cusName" name="cusName">

                </nz-form-control>

                <nz-form-label nzSpan="2" nzRequired>联系电话</nz-form-label>
                <nz-form-control nzSpan="4">
                  <input nz-input  required [(ngModel)]="product.cusMobile" name="cusMobile">

                </nz-form-control>

                <nz-form-label nzSpan="2" nzRequired>证件类型</nz-form-label>
                <nz-form-control nzSpan="4">
                  <nz-select required [(ngModel)]="product.cusrIdtype" name="cusrIdtype"  nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
                    <nz-option [nzLabel]="cusrIdtype.text" [nzValue]="cusrIdtype.value" *ngFor="let cusrIdtype of cusrIdtypes"></nz-option>
                  </nz-select>

                </nz-form-control>

                <nz-form-label nzSpan="2" nzRequired>证件号码</nz-form-label>
                <nz-form-control nzSpan="4">
                  <input nz-input required [(ngModel)]="product.cusIncard" name="cusIncard">

                </nz-form-control>

                <nz-form-label nzSpan="2" nzRequired>证件有效起始日</nz-form-label>
                <nz-form-control nzSpan="4">
                  <nz-date-picker nzFormat="yyyy-MM-dd" required name="cusIdValidfrom" [(ngModel)]="product.cusIdValidfrom"></nz-date-picker>


                </nz-form-control>

                <nz-form-label nzSpan="2" nzRequired>证件有效截止日</nz-form-label>
                <nz-form-control nzSpan="4">
                  <nz-date-picker nzFormat="yyyy-MM-dd" required name="cusIdValidto" [(ngModel)]="product.cusIdValidto"></nz-date-picker>



                </nz-form-control>

              <nz-form-label nzSpan="2" nzRequired>现居住地</nz-form-label>
              <nz-form-control nzSpan="4">
                <input nz-input required [(ngModel)]="product.cusResAddr" name="cusResAddr">

              </nz-form-control>

              <nz-form-label nzSpan="2" >性别</nz-form-label>
              <nz-form-control nzSpan="4">
                <nz-select style="" [(ngModel)]="product.cusGender" name="cusGender" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
                  <nz-option [nzLabel]="cusGender.text" [nzValue]="cusGender.value" *ngFor="let cusGender of cusGenders"></nz-option>
                </nz-select>
              </nz-form-control>

              <nz-form-label nzSpan="2" >婚姻</nz-form-label>
              <nz-form-control nzSpan="4">
                <nz-select style="" [(ngModel)]="product.cusMaritalStatus" name="cusMaritalStatus" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
                  <nz-option [nzLabel]="cusMaritalStatus.text" [nzValue]="cusMaritalStatus.value" *ngFor="let cusMaritalStatus of cusMaritalStatuss"></nz-option>
                </nz-select>
              </nz-form-control>

              <nz-form-label nzSpan="2">学历</nz-form-label>
              <nz-form-control nzSpan="4">
                <nz-select style="" [(ngModel)]="product.cusDeu" name="cusDeu" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
                  <nz-option [nzLabel]="cusDeu.text" [nzValue]="cusDeu.value" *ngFor="let cusDeu of cusDeus"></nz-option>
                </nz-select>
              </nz-form-control>

              <nz-form-label nzSpan="2">民族</nz-form-label>
              <nz-form-control nzSpan="4">
                <nz-select style="" [(ngModel)]="product.cusEthnical" name="cusEthnical" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
                  <nz-option [nzLabel]="cusEthnical.text" [nzValue]="cusEthnical.value" *ngFor="let cusEthnical of cusEthnicals"></nz-option>
                </nz-select>
              </nz-form-control>


              <!--<nz-form-label nzSpan="2" >年龄</nz-form-label>-->
              <!--<nz-form-control nzSpan="4">-->
                <!--<input nz-input [(ngModel)]="product.cusAge" name="cusAge">-->

              <!--</nz-form-control>-->

              <nz-form-label nzSpan="2" >出生日期</nz-form-label>
              <nz-form-control nzSpan="4">
                <nz-date-picker nzFormat="yyyy-MM-dd" name="cusBirthday" [(ngModel)]="product.cusBirthday"></nz-date-picker>



              </nz-form-control>

              <nz-form-label nzSpan="2" >QQ号码</nz-form-label>
              <nz-form-control nzSpan="4">
                <input nz-input [(ngModel)]="product.cusQqid" name="cusQqid">

              </nz-form-control>

              <nz-form-label nzSpan="2" >备注</nz-form-label>
              <nz-form-control nzSpan="4">
                <input nz-input [(ngModel)]="product.cusRemark" name="cusRemark">

              </nz-form-control>

              <nz-form-label nzSpan="2" nzRequired>是否有子女</nz-form-label>
              <nz-form-control nzSpan="4">

                <nz-select [(ngModel)]="product.orderBy4" name="orderBy4" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
                  <nz-option [nzLabel]="znsls.text" [nzValue]="znsls.value" *ngFor="let znsls of znsls"></nz-option>
                </nz-select>

                <!--<input   nz-input required [(ngModel)]="product.orderBy4" name="orderBy4">-->
              </nz-form-control>





              <nz-form-label nzSpan="2"  >工作单位</nz-form-label>
              <nz-form-control nzSpan="4">
                <input   nz-input required [(ngModel)]="product.orderBy6" name="orderBy6">
              </nz-form-control>



              <nz-form-label nzSpan="2"  >单位地址</nz-form-label>
              <nz-form-control nzSpan="4">
                <input   nz-input  [(ngModel)]="product.orderBy7" name="orderBy7">
              </nz-form-control>

              <nz-form-label nzSpan="2"  >月收入</nz-form-label>
              <nz-form-control nzSpan="4">
                <input   nz-input   [(ngModel)]="product.orderBy8" name="orderBy8">
              </nz-form-control>

              <nz-form-label nzSpan="2"  >银行卡号</nz-form-label>
              <nz-form-control nzSpan="4">
                <input   nz-input   [(ngModel)]="product.orderBy9" name="orderBy9">
              </nz-form-control>
              <!--<nz-form-label nzSpan="2" nzRequired>状态</nz-form-label>-->
              <!--<nz-form-control nzSpan="4">-->
                <!--<nz-select style="" [(ngModel)]="product.bpmStatus" name="bpmStatus" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">-->
                  <!--<nz-option [nzLabel]="bpmStatu.text" [nzValue]="bpmStatu.value" *ngFor="let bpmStatu of bpmStatus"></nz-option>-->
                <!--</nz-select>-->
              <!--</nz-form-control>-->

            </nz-form-item>
        </form>
    </nz-card>

  <nz-card nzTitle="车辆信息">
    <form nz-form>
      <nz-form-item>


        <nz-form-label nzSpan="2" nzRequired>注册/发证日期</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.dyptype" name="dyptype">

          <!--<nz-select style=""  [(ngModel)]="product.dyptype" name="dyptype" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">-->
          <!--<nz-option [nzLabel]="dyptype.text" [nzValue]="dyptype.value" *ngFor="let dyptype of dyptypes"></nz-option>-->
          <!--</nz-select>-->
        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>品牌/车型</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.dypname" name="dypname">

        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>车牌号</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.dypvalue" name="dypvalue">

        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>所有人</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.dypyear" name="dypyear">

        </nz-form-control>
        <nz-form-label nzSpan="2" nzRequired>使用性质</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.dypclass" name="dypclass">

          <!--<nz-select required="required" [(ngModel)]="product.dypclass" name="dypclass" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">-->
            <!--<nz-option [nzLabel]="dypclass.text" [nzValue]="dypclass.value" *ngFor="let dypclass of dypclasss"></nz-option>-->
          <!--</nz-select>-->
        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>住址</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.dypremark1" name="dypremark1">

        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>车架号</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.dypremark2" name="dypremark2">

        </nz-form-control>
        <nz-form-label nzSpan="2" nzRequired>发动机号</nz-form-label>
        <nz-form-control nzSpan="4">
          <input  nz-input required="required" [(ngModel)]="product.dypremark3" name="dypremark3">

        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-card>

  <nz-card nzTitle="申请信息">
    <form nz-form>
      <nz-form-item>


        <nz-form-label nzSpan="2" nzRequired>金额(元）</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.orderAmount" name="orderAmount">

        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>期限(月）</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.orderPeriod" name="orderPeriod">

        </nz-form-control>
        <nz-form-label nzSpan="2" >利率</nz-form-label>
        <nz-form-control nzSpan="4">
          <input   nz-input required [(ngModel)]="product.orderBy14" name="orderBy14">
        </nz-form-control>


        <nz-form-label nzSpan="2" >GPS</nz-form-label>
        <nz-form-control nzSpan="4">
          <input   nz-input required [(ngModel)]="product.orderBy15" name="orderBy15">
        </nz-form-control>

        <nz-form-label nzSpan="2" >服务费</nz-form-label>
        <nz-form-control nzSpan="4">
          <input   nz-input required [(ngModel)]="product.orderBy16" name="orderBy16">
        </nz-form-control>


        <nz-form-label nzSpan="2" >其他</nz-form-label>
        <nz-form-control nzSpan="4">
          <input   nz-input required [(ngModel)]="product.orderBy17" name="orderBy17">
        </nz-form-control>


        <!--<nz-form-label nzSpan="2" nzRequired>备注</nz-form-label>-->
        <!--<nz-form-control nzSpan="4">-->
        <!--<input nz-input required="required" [(ngModel)]="product.dypremark2" name="dypremark2">-->

        <!--</nz-form-control>-->

      </nz-form-item>
    </form>
  </nz-card>



  <nz-card nzTitle="担保人信息">
    <form nz-form>
      <nz-form-item>


        <nz-form-label nzSpan="2" nzRequired>与贷款人关系</nz-form-label>
        <nz-form-control nzSpan="4">
          <nz-select style=""  [(ngModel)]="product.emergencyRelation" name="emergencyRelation" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择'">
            <nz-option [nzLabel]="reltype.text" [nzValue]="reltype.value" *ngFor="let reltype of relTypes"></nz-option>
          </nz-select>
        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>姓名</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.emergencyContact" name="emergencyContact">

        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>身份证</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.emergencyOffice" name="emergencyOffice">

        </nz-form-control>

        <nz-form-label nzSpan="2" nzRequired>手机</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.emergencyMobile" name="emergencyMobile">

        </nz-form-control>


        <nz-form-label nzSpan="2" nzRequired>住址</nz-form-label>
        <nz-form-control nzSpan="4">
          <input nz-input required="required" [(ngModel)]="product.emergencyResAddr" name="emergencyResAddr">

        </nz-form-control>

        <!--<nz-form-label nzSpan="2" nzRequired>备注</nz-form-label>-->
        <!--<nz-form-control nzSpan="4">-->
          <!--<input nz-input required="required" [(ngModel)]="product.dypremark2" name="dypremark2">-->

        <!--</nz-form-control>-->

      </nz-form-item>
    </form>
  </nz-card>


    <nz-card nzTitle="文件信息 请上传授权书，签字照片等 ">

      <form nz-form>
        <div class="clearfix">

             <nz-upload
                         [nzMultiple]="true"
                         [nzAction]="uploadUr5"
                         [nzData]="avatarParam5"
                         nzListType="picture-card"
                         [(nzFileList)]="fileList"
                         [nzShowButton]="fileList.length < 30"
                         [nzPreview]="handlePreview">
               <!--nz-icon type="plus" style=" align-self:center;width: 116px;  height: 57px;margin-top: 46px  "-->
               <i nz-icon type="plus" style=" align-self:center;width: 116px;  height: 57px;margin-top: 46px  ">点击上传</i>
               <div style="margin-top: 0px; color: #666;">  </div>
             </nz-upload>
              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
                <ng-template #modalContent>
                  <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
                </ng-template>
              </nz-modal>
        </div>

        </form>
    </nz-card>
</nz-spin>
<footer-toolbar errorCollect>
  <button nz-button type="primary" nzType="primary"  [nzLoading]="loading" (click)="save(1)">保存</button>

  <button nz-button type="primary" nzType="primary"  [nzLoading]="loading" (click)="save(10)">提交</button>
</footer-toolbar>
